@extends('WShop::layout')
@push('styles')
<style>
    .layui-m-layerchild h3 {margin-top: 0px;}
</style>
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="background: transparent;">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-bottom" style="background: transparent;">
                <div class="mui-user-xx">

                    <form method="post" action="{{url()->current()}}" >
                        {{csrf_field()}}


                        <div class="mui-input-row">
                            <span>姓名</span>
                            <input type="text" class="mui-input-clear"  placeholder="请输入您的真实姓名" name="real_name" value="{{$user->real_name ?? ''}}">
                        </div>


                        <div class="mui-input-row">
                            <span>身份证</span>
                            <input type="text"  placeholder="请输入身份证号" name="ID_card" value="{{$user->info->ID_card ?? ''}}">
                        </div>



                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">身份证正面</div>
                            <a href="javascript:;">
                                @if($user->info->ID_card_front)
                                    <img src="{{$user->info->ID_card_front}}" width="45" id="preview" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview" />
                                @endif

                                <input type="hidden" name="ID_card_front" id="ID_card_front" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)"  />
                        </div>

                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">身份证反面</div>
                            <a href="javascript:;">
                                @if($user->info->ID_card_back)
                                    <img src="{{$user->info->ID_card_back}}" width="45" id="preview1" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview1" />
                                @endif

                                <input type="hidden" name="ID_card_back" id="ID_card_back" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview1(this)"  />
                        </div>

                        <button type="button" class="mui-btns"> 提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        function imgPreview(fileDom) {

            //判断是否支持FileReader
            if(window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if(!imageType.test(file.type)) {
                mui.alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                var pingzheng= document.getElementById("pingzheng")
                //图片路径设置为读取的图片
                img.src = e.target.result;
                var load =  layer.open({type: 2});
                $.ajax({
                    type: 'post',
                    url: '{{route('f_Upload_uploadBase64')}}',
                    dataType: 'json',
                    data: {
                        imgField:'ID_card_front',
                        ID_card_front: e.target.result,
                        group:'voucher',
                        _token:'{{csrf_token()}}'
                    }
                }).done(function (response) {
                    if(response.status){
                       // console.log(response);
                        $('#ID_card_front').val(response.data.url);
                    }else{
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    if (XMLHttpRequest.status == 422) {
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }else{
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {
                    layer.close(load);
                });
            };
            reader.readAsDataURL(file);
        }


        function imgPreview1(fileDom) {

            //判断是否支持FileReader
            if(window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if(!imageType.test(file.type)) {
                mui.alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview1");
                var pingzheng= document.getElementById("pingzheng")
                //图片路径设置为读取的图片
                img.src = e.target.result;
                var load =  layer.open({type: 2});
                $.ajax({
                    type: 'post',
                    url: '{{route('f_Upload_uploadBase64')}}',
                    dataType: 'json',
                    data: {
                        imgField:'ID_card_back',
                        ID_card_back: e.target.result,
                        group:'voucher',
                        _token:'{{csrf_token()}}'
                    }
                }).done(function (response) {
                    if(response.status){
                        // console.log(response);
                        $('#ID_card_back').val(response.data.url);
                    }else{
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    if (XMLHttpRequest.status == 422) {
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }else{
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {
                    layer.close(load);
                });
            };
            reader.readAsDataURL(file);
        }


        $('.mui-btns')[0].addEventListener('tap',function(){
            var form = $(this).parents('form');


            $.ajax({
                type: 'post',
                url: $(form).attr('action'),
                dataType: 'json',
                data: $(form).serialize()
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        })
    </script>

<script>
    $(function() {
        var is_real_name= parseInt("{{$user['is_real_name']}}");

        if (is_real_name == 1) {
            layer.open({
                title: [
                    '温馨提示',
                    'background-color:#8DCE16; color:#fff;'
                ],
                content: text,
                btn: '您已经完成实名认证。。。  ',
                shadeClose: false,
                yes: function(){
                    window.location.href="{{route('f_Wap_User_index')}}";
                }
            });
        }
    })
</script>

@endpush